<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>HTML Academy: Седона</title>
    <link href="css/style.min.css" rel="stylesheet" />
    <script src="js/picturefill.min.js"></script>
    <script src="js/svg4everybody.min.js"></script>
    <script>
      svg4everybody();
    </script>
    <link
      rel="preload"
      href="fonts/ptsans.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="fonts/ptsansbold.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
  </head>
  <body>
    <div class="container">
      <div style="display:none">
        <include src="build/img/sprite.svg"></include>
      </div>
      <header class="page-header">
        <nav class="page-header__main-nav main-nav">
          <!-- Класcы переключающие состояние - ".site-list" и ".site-list--open" -->
          <ul class="main-nav__list site-list">
            <li class="site-list__item">
              <a class="site-list__link site-list__link--active">Главная</a>
            </li>
            <li class="site-list__item">
              <a class="site-list__link" href="photo.html">Фото и видео</a>
            </li>
            <li class="site-list__item">
              <a class="site-list__link" href="form.html">Форма отзыва</a>
            </li>
            <li class="site-list__item">
              <a
                class="site-list__link"
                href="https://htmlacademy.ru/intensive/adaptive"
                >HTML Academy</a
              >
            </li>
          </ul>
          <!-- Классы переключающие соcтояние - ".main-nav__toggle" и ".main-nav__toggle--cross" -->
          <button
            class="main-nav__toggle"
            type="button"
            aria-label="Открыть меню"
          ></button>
        </nav>
        <div class="page-header__logo logo">
          <a class="logo__link">
            <picture>
              <source
                media="(min-width: 1200px)"
                srcset="img/logo-sedona-desktop.svg"
              />
              <source
                media="(min-width: 768px)"
                srcset="img/logo-sedona-tablet.svg"
              />
              <img
                class="logo__image"
                src="img/logo-sedona-mobile.svg"
                width="102"
                height="83"
                alt="Логотип сайта"
              />
            </picture>
          </a>
        </div>
      </header>
      <main class="page-main">
        <div class="page-main__promo-block promo-block">
          <img
            class="promo-block__image"
            src="img/text-sedona-index.svg"
            width="281"
            height="214"
            alt="Надпись SEDONA"
          />
        </div>
        <div class="page-main__page-info page-info page-info--triangle">
          <h1 class="page-info__title">
            Седона — небольшой городок в Аризоне, заслуживающий большего!
          </h1>
          <p class="page-info__text">
            Рассмотрим 5 причин, по которым Седона круче, чем Гранд Каньон!
          </p>
        </div>
        <div class="page-main__advantages advantages">
          <div class="advantages__text-block">
            <h2
              class="advantages__title advantages__title--margin-top advantages__title--padding-lr"
            >
              Настоящий городок
            </h2>
            <p class="advantages__number">— №1 —</p>
            <p class="advantages__description">
              Седона не аттракцион для туристов, там течет своя жизнь
            </p>
          </div>
          <picture>
            <source
              type="image/webp"
              media="(min-width: 1200px)"
              srcset="
                img/main-city-desktop@1x.webp 1x,
                img/main-city-desktop@2x.webp 2x
              "
            />
            <source
              type="image/webp"
              media="(min-width: 768px)"
              srcset="
                img/main-city-tablet@1x.webp 1x,
                img/main-city-tablet@2x.webp 2x
              "
            />
            <source
              type="image/webp"
              srcset="
                img/main-city-mobile@1x.webp 1x,
                img/main-city-mobile@2x.webp 2x
              "
            />
            <source
              media="(min-width: 1200px)"
              srcset="
                img/main-city-desktop@1x.jpg 1x,
                img/main-city-desktop@2x.jpg 2x
              "
            />
            <source
              media="(min-width: 768px)"
              srcset="
                img/main-city-tablet@1x.jpg 1x,
                img/main-city-tablet@2x.jpg 2x
              "
            />
            <img
              class="advantages__image advantages__image--city"
              src="img/main-city-mobile@1x.jpg"
              srcset="img/main-city-mobile@2x.jpg 2x"
              width="320"
              height="260"
              alt="Фото города Седона"
            />
          </picture>
        </div>
        <ul class="page-main__reference reference">
          <li class="reference__item">
            <div class="reference__text-wrapper">
              <div class="reference__title">
                <div class="reference__icon reference__icon--house"></div>
                <span>Жилье</span>
              </div>
              <p class="reference__description">
                Рекомендуем пожить в настоящем мотеле, все как в кино!
              </p>
            </div>
          </li>
          <li class="reference__item reference__item--gift-order">
            <div
              class="reference__text-wrapper reference__text-wrapper--gift-width"
            >
              <div class="reference__title">
                <div class="reference__icon reference__icon--gift"></div>
                <span>Сувениры</span>
              </div>
              <p class="reference__description">
                Не только китайского,<br class="reference__word-wrap" />
                но и местного производства!
              </p>
            </div>
          </li>
          <li class="reference__item">
            <div
              class="reference__text-wrapper reference__text-wrapper--burger-width"
            >
              <div class="reference__title">
                <div class="reference__icon reference__icon--burger"></div>
                <span>Еда</span>
              </div>
              <p class="reference__description">
                Всегда заказывайте фирменный бургер, Вы не разочаруетесь!
              </p>
            </div>
          </li>
        </ul>
        <div class="page-main__advantages advantages advantages--reverse">
          <div
            class="advantages__text-block advantages__text-block--padding-left-right"
          >
            <h2 class="advantages__title advantages__title--padding-lr">
              Там есть мост&nbsp;дьявола
            </h2>
            <p class="advantages__number">— №2 —</p>
            <p class="advantages__description">
              Да, по нему можно пройти! Если вы осмелитесь, конечно
            </p>
          </div>
          <picture>
            <source
              type="image/webp"
              media="(min-width: 1200px)"
              srcset="
                img/main-bridge-desktop@1x.webp 1x,
                img/main-bridge-desktop@2x.webp 2x
              "
            />
            <source
              type="image/webp"
              media="(min-width: 768px)"
              srcset="
                img/main-bridge-tablet@1x.webp 1x,
                img/main-bridge-tablet@2x.webp 2x
              "
            />
            <source
              type="image/webp"
              srcset="
                img/main-bridge-mobile@1x.webp 1x,
                img/main-bridge-mobile@2x.webp 2x
              "
            />
            <source
              media="(min-width: 1200px)"
              srcset="
                img/main-bridge-desktop@1x.jpg 1x,
                img/main-bridge-desktop@2x.jpg 2x
              "
            />
            <source
              media="(min-width: 768px)"
              srcset="
                img/main-bridge-tablet@1x.jpg 1x,
                img/main-bridge-tablet@2x.jpg 2x
              "
            />
            <img
              class="advantages__image advantages__image--bridge"
              src="img/main-bridge-mobile@1x.jpg"
              srcset="img/main-bridge-mobile@2x.jpg 2x"
              width="320"
              height="260"
              alt="Мост дьявола"
            />
          </picture>
        </div>
        <div class="page-main__reason reason">
          <div class="reason__item">
            <div class="reason__text-block">
              <h2 class="reason__title">Небольшая площадь</h2>
              <p class="reason__number">— №3 —</p>
              <p class="reason__description">
                Все интересные места находятся очень близко
              </p>
            </div>
          </div>
          <div class="reason__item">
            <div class="reason__text-block reason__text-block--border-top">
              <h2 class="reason__title">Красивая дорога</h2>
              <p class="reason__number">— №4 —</p>
              <p class="reason__description">
                Ехать в Седону из Лас-Вегаса совсем не скучно!
              </p>
            </div>
          </div>
          <div class="reason__item">
            <div class="reason__text-block reason__text-block--border-top">
              <h2 class="reason__title">Мало туристов</h2>
              <p class="reason__number">— №5 —</p>
              <p class="reason__description">
                Большинство едет в гранд каньон и толпится там
              </p>
            </div>
          </div>
        </div>
        <div class="page-main__find-hotel find-hotel">
          <div class="find-hotel__text-wrapper">
            <h2 class="find-hotel__title">Заинтересовались?</h2>
            <p class="find-hotel__description">
              Укажите предполагаемые даты поездки,<br
                class="find-hotel__word-wrap"
              />
              и мы покажем вам лучшие предложения гостиниц в седоне
            </p>
          </div>
          <div class="find-hotel__button button">
            <a class="find-hotel__link" href="#">
              Найти гостиницу
            </a>
          </div>
        </div>
        <div class="page-main__map map">
          <iframe
            class="map__interactive"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1676033.2334398893!2d-112.88345706121304!3d34.86872828170784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872da1c0887cfcab%3A0x58ca19c5d9e35561!2sSedona!5e0!3m2!1sru!2sru!4v1579261755406!5m2!1sru!2sru"
            width="320"
            height="350"
            style="border:0;"
            allowfullscreen=""
          >
          </iframe>
          <a class="map__link" href="map.html" aria-label="Город на карте">
            <picture>
              <source
                type="image/webp"
                media="(min-width: 1200px)"
                srcset="
                  img/bg-map-desktop@1x.webp 1x,
                  img/bg-map-desktop@2x.webp 2x
                "
              />
              <source
                type="image/webp"
                media="(min-width: 768px)"
                srcset="
                  img/bg-map-tablet@1x.webp 1x,
                  img/bg-map-tablet@2x.webp 2x
                "
              />
              <source
                type="image/webp"
                srcset="
                  img/bg-map-mobile@1x.webp 1x,
                  img/bg-map-mobile@2x.webp 2x
                "
              />
              <source
                media="(min-width: 1200px)"
                srcset="
                  img/bg-map-desktop@1x.jpg 1x,
                  img/bg-map-desktop@2x.jpg 2x
                "
              />
              <source
                media="(min-width: 768px)"
                srcset="
                  img/bg-map-tablet@1x.jpg 1x,
                  img/bg-map-tablet@2x.jpg 2x
                "
              />
              <img
                class="map__image"
                src="img/bg-map-mobile@1x.jpg"
                srcset="img/bg-map-mobile@2x.jpg 2x"
                width="320"
                height="350"
                alt="Город на карте"
              />
            </picture>
          </a>
        </div>
      </main>
      <footer class="page-footer">
        <p class="page-footer__contacts contacts">#visitSEDONA</p>
        <ul class="page-footer__social social">
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.twitter.com"
              aria-label="Перейти на нашу страницу в Твиттере"
              target="_blank"
            >
              <svg
                class="social__image social__image--twitter"
                width="18"
                height="14"
              >
                <use xlink:href="#icon-twitter"></use>
              </svg>
            </a>
          </li>
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.facebook.com"
              aria-label="Перейти на нашу страницу в Facebook"
              target="_blank"
            >
              <svg
                class="social__image social__image--facebook"
                width="9"
                height="18"
              >
                <use xlink:href="#icon-facebook"></use>
              </svg>
            </a>
          </li>
          <li class="social__item">
            <a
              class="social__link"
              href="https://www.youtube.com"
              aria-label="Перейти на нашу страницу в Youtube"
              target="_blank"
            >
              <svg
                class="social__image social__image--youtube"
                width="20"
                height="14"
              >
                <use xlink:href="#icon-youtube"></use>
              </svg>
            </a>
          </li>
        </ul>
        <div class="page-footer__copyright copyright">
          <h2 class="copyright__text">Разработано</h2>
          <a
            class="copyright__link"
            href="https://htmlacademy.ru/intensive/adaptive"
            aria-label="Перейти на сайт HTML Academy"
            target="_blank"
          >
            <svg
              class="copyright__image"
              width="27"
              height="34"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 26.943 34.09"
              enable-background="new 0 0 26.943 34.09"
              xml:space="preserve"
            >
              <path
                d="M13.62,0.017L13.472,0L0,1.412v24.661l13.473,8.017l13.43-7.99l0.042-0.025V1.412L13.62,0.017z M25.019,12.127L13.495,5.334 L13.494,5.23l-0.087,0.05l-0.088-0.056v0.109L1.925,12.118V3.147l11.548-1.212l11.547,1.212V12.127z M13.405,6.787L24.923,13.5 l-4.479,2.64l-7.093-4.221l-0.014,1.415l5.904,3.513l-0.86,0.507l-5.03-2.992l-0.014,1.415l3.827,2.275l-0.782,0.523l-3.031-1.787 l-0.014,1.413l1.853,1.091l-1.8,1.081L2.034,13.622L13.405,6.787z M1.925,15.127l11.411,6.791l0.016,1.044L5.41,18.234L5.395,19.65 l7.979,4.795l0.018,1.076l-7.973-4.74l-0.013,1.414l8.021,4.822l0.046,0.025l8.143-4.872l-0.011-5.177l3.415-2.036v10.021 L13.472,31.85L1.925,24.979V15.127z"
              ></path>
            </svg>
          </a>
        </div>
      </footer>
    </div>
  </body>
</html>
